// import { layoutThemeConfig } from '@/config/layout-theme'
import type { ThemeType } from '@/config/theme'

import { useLayoutTheme } from '@/composables/layout-theme'
import { colors, darkColors } from '@/config/theme'


import { useCssVar } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const useAppStore = defineStore('app', () => {
  // 开发时用于本地调试布局
  // const defaultLayout = import.meta.env.DEV ? layoutThemeConfig : useLayoutTheme()
  const defaultLayout = useLayoutTheme()
  const layout = reactive(unref(defaultLayout))



  const themeList = computed<ThemeType[]>(() => {
    const list = []
    const myColors = layout.layoutStyle === 'dark' ? darkColors : colors
    for (const key in myColors) {
      const value = myColors[key]
      list.push({
        color: value.common?.primaryColor as string,
        key,
        title: `某某色.${key}`,
      })
    }
    return list
  })

  const overridesTheme = computed(() => {
    if (layout.layoutStyle === 'dark')
      return darkColors[layout.theme]

    return colors[layout.theme]
  })

  watch(
    () => layout.theme,
    () => {
      const el = useTemplateRef('el')

      const color = useCssVar('--el-color-primary', el as Ref<null>)
      const HoverColor = useCssVar('--el-color-primary-light-3', el as Ref<null>)
      const activerColor = useCssVar('--el-color-primary-dark-2', el as Ref<null>)

      color.value = overridesTheme.value.common.primaryColor
      HoverColor.value = overridesTheme.value.common.primaryColorHover
      activerColor.value = overridesTheme.value.common.primaryColorPressed

    },
    {
      immediate: true 
    }
  )





  const MenuList = ref([
    {
      id: 1,
      parentView: 'layout',
      path: '/home',
      name: '首页',
      query: null,
      component: null,
      redirect: null,
      type: 0,
      meta: {
        title: '首页',
        icon: 'el-icon-homeFilled',
        hidden: false
      },
      children: [
        {
          id: 2,
          component: null,
          name: '首页一',
          parentView: 'layout',
          path: '/home',
          type: 1,
          query: null,
          redirect: null,
          meta: {
            title: '首页一',
            icon: 'el-icon-DArrow-Left',
            hidden: false
          },
          children: null
        },
        {
          id: 3,
          component: null,
          name: '首页二',
          parentView: 'layout',
          path: '/home/page2',
          type: 1,
          query: null,
          redirect: null,
          meta: {
            title: '首页二',
            icon: '',
            hidden: false
          },
          children: null
        },
        {
          id: 3,
          component: null,
          name: '首页三',
          parentView: 'layout',
          path: '/home/page3',
          type: 1,
          query: null,
          redirect: null,
          meta: {
            title: '首页三',
            icon: 'el-icon-user-filled',
            hidden: false
          },
          children: [
            {
              id: 3,
              component: null,
              name: '首页三-1',
              parentView: 'layout',
              path: '/home/page3',
              type: 1,
              query: null,
              redirect: null,
              meta: {
                title: '首页三-1',
                icon: 'el-icon-circlePlus-filled',
                hidden: false
              },
              children: null
            },
            {
              id: 3,
              component: null,
              name: '首页三-2',
              parentView: 'layout',
              path: '/home/page4',
              type: 1,
              query: null,
              redirect: null,
              meta: {
                title: '首页三-2',
                icon: '',
                hidden: false
              },
              children: null
            },
          ]
        }
  
      ]
    },
    {
      id: 11111,
      parentView: 'layout',
      path: '/ceshi1',
      name: 'ceshi1',
      query: null,
      component: null,
      redirect: null,
      type: 0,
      children: [],
      meta: {
        title: 'ceshi1',
        icon: 'el-icon-Monitor',
        hidden: false
      },
    },
    {
      id: 22222,
      parentView: 'layout',
      path: '/ceshi2',
      name: 'ceshi2',
      query: null,
      component: null,
      redirect: null,
      type: 0,
      children: null,
    }
  ])




  return {
    layout,
    themeList,
    overridesTheme,
    MenuList
  }
})

export {
  useAppStore,
}